<template>
  <div class="app-container">
    <div class="top-bar-container">
      <el-row>
        <el-col>
          <div class="search-container">
            <search-form @search-submit="getRewardList">
              <search-input v-model="listQuery.name" placeholder="奖励名称" />
              <search-select-dict v-model="listQuery.rewardType" :dict="rewardTypeList" placeholder="奖励类型" />
            </search-form>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-table :ref="multiple ? 'multipleTable' : 'singleTable'" v-loading="listLoading" :data="list" border fit stripe highlight-current-row @current-change="handleCurrentChange" @selection-change="handleSelectionChange">

      <el-table-column
        v-if="multiple"
        type="selection"
        width="55"
      />

      <el-table-column align="center" label="ID" prop="id" />

      <el-table-column align="center" label="奖励名称" prop="name" />

      <el-table-column align="center" label="奖励描述" prop="description" />

      <el-table-column align="center" label="奖励类型" prop="placeType">
        <template slot-scope="scope">{{ scope.row.rewardType | rewardTypeFilter }}</template>
      </el-table-column>

      <el-table-column align="center" label="奖励数量" prop="quantity" />

      <el-table-column
        v-if="!multiple"
        align="center"
        fixed="right"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button-group>
            <el-button v-if="scope.row.isBound" type="danger" size="mini" title="解绑" @click="handleUnbind(scope.row)">解绑</el-button>
            <el-button v-else type="primary" size="mini" title="选择" @click="handleCurrentChange(scope.row)">选择</el-button>
          </el-button-group>
        </template>
      </el-table-column>

    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getRewardList"
    />

    <div class="footer">
      <el-button @click="$emit('click-close')">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import SearchForm from '@/components/SearchForm'
import SearchInput from '@/components/SearchForm/SearchInput'
import SearchSelectDict from '@/components/SearchForm/SearchSelectDict'
import { rewardTypeList } from '@/utils/dict'
import { searchRewardList } from '@/api/rest/reward'

const initForm = {
  selectedList: null
}

export default {
  name: 'InRewardList',
  components: { SearchInput, Pagination, SearchForm, SearchSelectDict },
  filters: {
  },
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    selectedList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      editForm: { ...initForm },
      listQuery: {
        name: null,
        rewardType: null,
        page: 1,
        limit: 10
      },
      rewardTypeList: rewardTypeList
    }
  },
  computed: {},
  watch: {
    selectedList(val) {
      this.getRewardList()
    }
  },
  created() {
    this.getRewardList()
  },
  methods: {
    getRewardList() {
      this.listLoading = true
      searchRewardList(this.listQuery)
        .then(response => {
          this.list = []
          response.data.items.forEach(item => {
            this.list.push(Object.assign(item, { isBound: !!this.selectedList.find(i => item.id === i.id) }))
          })
          this.total = response.data.total
          this.listLoading = false
        })
        .finally(() => {
          if (this.multiple) {
            if (this.selectedList) {
              this.selectedList.forEach(id => {
                this.$refs.multipleTable.toggleRowSelection(this.list.find(item => item.id === id))
              })
            } else {
              this.$refs.multipleTable.clearSelection()
            }
          }
        })
    },
    handleUnbind(row) {
      this.$emit('unbind', row.id)
    },
    handleSubmit() {
      if (this.editForm.selectedList < 1) {
        this.$alert('请选择奖励')
        return false
      }
      this.$emit('selected-list', this.editForm.selectedList)
      this.editForm.selectedList = []
    },
    setCurrent(row) {
      if (this.$refs.singleTable !== undefined) {
        this.$refs.singleTable.setCurrentRow(row)
      }
    },
    handleCurrentChange(row) {
      if (!this.multiple) {
        this.editForm.selectedList = [row]
      }
    },
    handleSelectionChange(rowList) {
      if (this.multiple) {
        this.editForm.selectedList = rowList
      }
    }
  }
}
</script>
<style scoped>
.footer {
  display: flex;
  justify-content: flex-end;
}
.edit-form {
  margin-top: 20px;
}
>>> .el-table__body tr.current-row > td {
  background-color: #e6fcda !important;
}
>>> .el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
  background-color: #e6fcda !important;
}
.tag-list {
  display: flex;
  flex-direction: column;
}
</style>

